<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>datastore demo</title>
	
	<style type="text/css">
		div.data-item {
			float:left;
			width:300px;
			border:1px solid #ccc;
			margin:0 10px 10px 0;
			padding:10px;
		
		}
		
		form.search-data {
			background-color: #eaeaea;
			margin:-5px;
			padding:20px;
		}
		form.search-data p {
			margin-bottom:0;
		}
		form.edit-data label {
			display:block; }
		
		form.edit-data input[type="text"],
		form.edit-data textarea {
			width:95%;
			padding:5px 0;
			display:inline-block;
			margin:0 0 10px 0;
			border:1px inset #ccc;
		}
		hr { clear:both;}
	</style>
	
	<script src="ejs-tmpl/ejs.js" type="text/javascript" charset="utf-8"></script>
	<script src="ejs-tmpl/view.js" type="text/javascript" charset="utf-8"></script>
	
	
	<script src="jquery-api-docs.js" type="text/javascript" charset="utf-8"></script>  
	
	<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
		
	<script src="store.js" type="text/javascript" charset="utf-8"></script>
	
	<script type="text/javascript">
		window.api.array = [];
		for(var k in window.api.data) {
			delete window.api.data[k].examples;
			window.api.array.push(window.api.data[k]);
		};
		window.api = Store(window.api.array);
		$(function() {
			
			var searchForm = $('form.search-data');
			
			searchForm.submit(function() {
				$('form input[name="find"]').trigger('search');
				return false;
			}).find('p.results').hide();
			
			$('input[name="type"]',searchForm)
				.bind('change',function() {
					$('form input[name="find"]').trigger('search');
				});
			
			$('input[name="find"]',searchForm)
				.bind('search',function() {
					var $this = $(this),
						searchType = $('input[name="type"]:checked',searchForm).val(),
						what = (searchType == 'text')
								? $this.val()
								: new RegExp( Store.utils.regexp.escape($this.val() ),'i');
										
					$this.next('p.results').text('');
					editData.hide();
					$('div.data-item,span.info',editData).remove();
					
					var t = new Date().valueOf();
					var data = api.find({name: what});
					var t2 = new Date().valueOf();
					
				 	$this.siblings('p.results')
							.text(data.length+' results found in '+ (t2 - t)+' ms')
							.show();
					
					if(!data.length) { return; }
					
					/*var displaySomeData = data
					.print(['name','desc','longdesc','type','id'],'\
						<div class="data-item" id="$5">\
							<strong>ID:</strong> <span>$5</span><br>\
							<label for="$5_name">Name:</label> <input autocomplete="off" type="text" value="$1" name="_name" id="$5_name"><br>\
							<label for="$5_desc">Description:</label> <input autocomplete="off" type="text" value="$2" name="_desc" id="$5_desc"><br>\
							<label for="$5_type">Type:</label> <input type="text" autocomplete="off" value="$4" name="_type" id="$5_type"><br>\
							<label for="$5_longdesc">Long Description:</label> <textarea name="_longdesc" id="$5_longdesc">$3</textarea> <br>\
							<input type="button" value="Save" id="$5_save" name="item-save">\
							<input type="button" value="Delete" id="$5_delete" name="item-delete">\
						</div>')
					.join('');
					
					$('div',editData)[0].innerHTML = displaySomeData;*/

					$('div',editData)[0].innerHTML = data.print({
						url: 'views/jquery-api-item.ejs',
						types : api.values('type')
					});
					
					editData.show();
									
				})
				.keyup(function(e) {
					var $this = $(this),
						keyCode = e.keyCode,
						which = String.fromCharCode(keyCode),
						validCodes = [ 
							8, // backspace
							46, // delete
							32, // space
							13 // return
						];

					if(!which.match(/\w/) && $.inArray(keyCode,validCodes) == -1 ) {return;}

					if($this.data('timer')) {clearTimeout($this.data('timer')); }				

					$this.data('timer',setTimeout(function() {
						clearTimeout($this.data('timer'));
						$this.data('timer',null);
						$this.trigger('search');
					},300));

				})
				
				
				
			$(document).bind('click.SaveDeleteItem',function(e) {
				var target = $(e.target),
					isSave = target.is('[name="item-save"]'),
					isDelete = target.is('[name="item-delete"]') ;
				
				if(!isSave && !isDelete ) { return; }
				
				target.next('span').remove();
				
				var itemDiv = target.closest('div.data-item'),
					itemID = itemDiv.attr('id');
				
				var item = api.find({ id : itemID });
				
				if(isSave) {
					var dataName = $('[name="_name"]',itemDiv).val(),
						dataDesc = $('[name="_desc"]',itemDiv).val(),
						dataType = $('[name="_type"]',itemDiv).val(),
						dataLongDesc = $('[name="_longdesc"]',itemDiv).val();
					
					item.update({
							name : dataName,
							desc : dataDesc,
							type : dataType,
							longdesc: dataLongDesc
						});
					
					$('<span>Saved!</span>').insertAfter(target).fadeOut(2000);
					
				} else {
					item.remove();
					
					itemDiv.fadeOut(function() {
						$(this).remove();
					});
				}
				
				return false;
				
			})
			
			var editData = $('form.edit-data')
				.hide()
				.bind('submit',function() {
					var items = $('div.data-item',this)
					
					var submitInput = $('input[name="submitform"]',this)
						.next('span.info').remove().end();
					
					items.each(function() {
						var $this = $(this),
							dataID = $this.attr('id'),
							dataName = $('[name="_name"]',this).val(),
							dataDesc = $('[name="_desc"]',this).val(),
							dataType = $('[name="_type"]',this).val(),
							dataLongDesc = $('[name="_longdesc"]',this).val();
						
						api
							.find({ id : dataID })
							.update({
								name : dataName,
								desc : dataDesc,
								type : dataType,
								longdesc: dataLongDesc
							});
					});
					
					submitInput.after('<span class="info">Data saved. Search again to see new data.</span>');
					
					return false;
				});
			
			
			$('input[name="find"]',searchForm).trigger('search');
				
		});
	</script>
</head>
<body>
	<form method="get" action="" class="search-data">
		<div>
			Search:
			<input name="find" value="$" autocomplete="off"> <input type="submit" name="submitform" value="Seach"> <br>
			<input type="radio" name="type" value="text" id="search_text">
			<label for="search_text">Exact match</label>
			<input type="radio" name="type" id="search_regexp" value="regexp" checked="checked">
			<label for="search_regexp">Contains</label>
			<p class="results"></p>
		</div>
	</form>
	<form method="get" action="" class="edit-data">
		<hr><input type="submit" name="submitform" value="Save All"><hr>
		<div>
		</div>
		<hr><input type="submit" name="submitform" value="Save All"><hr>
	</form>

	
</body>
</html>
